<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				height:200px;
				width:300px;
				background-color: #ADD8E6;
				line-height:200px;
				text-align: center;
				margin:0 auto;
				font-size:24px;
			}
		</style>
	</head>
	<body>
		<div id="time"></div>
		<script>
			var timebox=document.getElementById("time");
			var timer=null;
			//结束时间
			var endtime=new Date("2022-5-7 17:00:00");
			
			//补零函数
			function addZero(n){
				return n<10?"0"+n:n;
			}
			function myTime(endtime){
				//现在的时间
				var nowtime=new Date();
				//时间差-----毫秒
				var difftime=endtime-nowtime;
				
				if(difftime<=0){//定时器停止，div内容---》活动已经结束
					clearInterval(timer);
					timer=null;
					return "活动已经结束";//中断函数
				}
				
				//将毫秒差值---》时 分 秒
				var hours=Math.floor(difftime/(60*60*1000));//小时
				var minutes=Math.floor((difftime-hours*60*60*1000)/(60*1000));//分钟
				var seconds=Math.floor((difftime-hours*60*60*1000-minutes*60*1000)/1000);//秒
				
				var res=addZero(hours)+":"+addZero(minutes)+":"+addZero(seconds);
				
				return res;
			}
			
			//一打开页面，直接显示时间
			timebox.innerHTML=myTime(endtime);
			
			timer=setInterval(function(){
				//每隔1000毫秒，重新获取一下时间
				timebox.innerHTML=myTime(endtime);
			},1000)
			
			
		</script>
	</body>
</html>
